<template>
  <a-button
    type="primary"
    @click="$emit('back')"
    ghost
    style="margin: 30px 45px 20px 0px; font-size: 15px; float: right"
    >返回</a-button
  >
  <a-typography-title :level="2" style="margin: 20px 0px 20px 530px"
    >员工信息表</a-typography-title
  >

  <a-table
    :columns="columns"
    :data-source="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 插入名称为brid的插槽 -->
    <template #brid="{ text }"> 分店{{ text }} </template>
    <template #job="{ text }"> {{ roles[text] }} </template>
    <template #sex="{ text }">
      <a-tag v-if="text == true" color="blue">男</a-tag>
      <a-tag v-else color="pink">女</a-tag>
    </template>
    <template #state="{ text }">
      <a-tag v-if="text == true" color="green">在职</a-tag>
      <a-tag v-else color="orange">请假</a-tag>
    </template>
  </a-table>
</template>

<script>
import { ref, reactive } from "vue";
import { get, tip } from "@/common";

export default {
  props: ["record"], //定义一个属性可以接收数据

  setup(props) {
    const roles = {
      1000: "总经理",
      1100: "分店经理",
      1200: "销售管理员",
      1300: "库存管理员",
      1400: "收银员",
    };

    const columns = [
      {
        dataIndex: "br_id",
        title: "分店编号",
        align: "center",
        slots: {
          customRender: "brid",
        },
      },
      {
        dataIndex: "st_id", //服务端数据
        title: "员工号", //表头项名称
        align: "center",
      },
      {
        dataIndex: "st_name",
        title: "姓名",
        align: "center",
      },
      {
        dataIndex: "st_sex",
        title: "性别",
        align: "center",
        slots: {
          customRender: "sex",
        },
      },
      {
        dataIndex: "st_birth",
        title: "出生日期",
        align: "center",
      },
      {
        dataIndex: "ro_id",
        title: "职位",
        align: "center",
        slots: {
          customRender: "job",
        },
      },
      {
        dataIndex: "st_state",
        title: "工作状态",
        align: "center",
        slots: {
          customRender: "state",
        },
      },
      {
        dataIndex: "st_salary",
        title: "月薪",
        align: "center",
      },
      {
        dataIndex: "st_entry",
        title: "入职时间",
        align: "center",
      },
    ];

    //分页处理-start
    const query = reactive({
      // br_id: "",
    }); //定义查询参数
    query.br_id = props.record.br_id;

    const page = ref({}); //接收服务端返回的分页对象

    //分页引擎
    const pagination = reactive({
      current: 1, //当前页
      pageSize: 5, //每页记录数
      total: 0, //总记录数
      pageSizeOptions: ["5", "10", "20", "30", "50"], //每页记录下拉框的选型
      showSizeChanger: true, //是否展示每页记录数下拉框
      showQuickJumper: true, //是否展示快速跳转
      showTotal: (total, range) => {
        //展示总页数等文字说明信息的
        return (
          "共" +
          total +
          "条记录,当前第" +
          pagination.current +
          "页" +
          (range[1] - range[0] + 1) +
          "条记录"
        );
      },
    });

    //获取当前分页
    const getPage = (pageNum = 1) => {
      query.pageNum = pageNum;
      query.pageSize = pagination.pageSize;

      get("/branch/information/brst", query).then((res) => {
        page.value = res.data; //将服务端传来的分页数据赋值予page

        //更新分页引擎
        pagination.current = page.value.current;
        pagination.pageSize = page.value.pageSize;
        pagination.total = page.value.total;
      });
    };
    getPage(1); //页面首先加载第一页

    //当分页发送变化时（如：页码、每页记录数变化时）
    const handleTableChange = (
      pagi,
      filters,
      sorter,
      { currentDataSource }
    ) => {
      pagination.current = pagi.current;
      pagination.pageSize = pagi.pageSize;
      pagination.total = pagi.total;

      getPage(pagination.current);
    };
    //分页处理-end

    // console.log(props.record);

    return {
      query,
      page,
      pagination,
      getPage,
      handleTableChange,
      roles,
      columns,
    };
  },
};
</script>

<style scoped>
</style>